<template>
  <div class="Login" v-loading.fullscreen.lock="fullscreenLoading">
    <el-container>
      <el-main>
        <div class="login-modal">
          <h3 class="login-text">登陆BI System Management</h3>
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
            <el-form-item label="帐号" prop="account">
              <el-input
                v-model="ruleForm.account"
                placeholder="请输入帐号"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="ruleForm.password"
                placeholder="请输入密码"
                show-password
                clearable
              ></el-input>
            </el-form-item>
            <el-button
              class="login-btn"
              type="primary"
              @click="submitForm('ruleForm')"
              >登陆</el-button
            >
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: "Login",
  components: {},
  data() {
    return {
      fullscreenLoading: false, // 加载动画
      ruleForm: {
        account: "",
        password: "",
      },
      rules: {
        account: [{ required: true, message: "请输入帐号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  created() {
    sessionStorage.clear();
  },
  methods: {
    // 登陆
    submitForm(formName) {
      this.fullscreenLoading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.commonHandle
            .getLogin({
              userName: this.ruleForm.account,
              pwd: this.ruleForm.password,
            })
            .then((res) => {
              const token = res?.token;
              // to-do 保存token
              this.$store.dispatch("saveUserToken", token);
              this.$store.dispatch("saveUserName", this.ruleForm.account);
              setTimeout(() => {
                this.fullscreenLoading = false;
                this.$router.push({
                  path: "/index",
                });
              }, 500);
            })
            .catch(() => {
              this.fullscreenLoading = false;
            });
        } else {
          this.$message.warning("请将帐号密码填写完毕后进行登陆");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less">
.Login {
  background-color: @color-primary;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  .login-modal {
    background-color: #ffffff;
    width: 400px;
    border-radius: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    .login-text {
      color: @color-primary;
      text-align: center;
    }
    .login-btn {
      width: 97px;
      margin-left: 50%;
      transform: translate(-50%);
      margin-bottom: 10px;
    }
  }
}
</style>
